<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label=":">
        <el-input v-model="queryParams.customerNo" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.siteCode" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.customerName" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.address" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.phone" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.mobile" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.fax" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.email" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.webUrl" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.manager" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.isInternal" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.groupCode" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.customerAccount" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.accountBank" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.isActived" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.remark" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.version" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.defaultAllowZeroCost" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.upCustomerNo" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.paymentTerm" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label=":">
        <el-input v-model="queryParams.warehouseCode" size="small" placeholder="请输入" clearable @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-date-picker v-model="queryParams.createDate" type="date" value-format="yyyy-MM-dd" size="small" placeholder="选择创建时间" clearable />
      </el-form-item>
      <el-form-item label="更新时间:">
        <el-date-picker v-model="queryParams.updateDate" type="date" value-format="yyyy-MM-dd" size="small" placeholder="选择更新时间" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button v-hasPermission="['pms:tWhWarehouseCustomer:insert']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['pms:tWhWarehouseCustomer:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['pms:tWhWarehouseCustomer:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['pms:tWhWarehouseCustomer:export']" type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="" align="center" prop="customerNo" />
      <el-table-column label="" align="center" prop="siteCode" />
      <el-table-column label="" align="center" prop="customerName" />
      <el-table-column label="" align="center" prop="address" />
      <el-table-column label="" align="center" prop="phone" />
      <el-table-column label="" align="center" prop="mobile" />
      <el-table-column label="" align="center" prop="fax" />
      <el-table-column label="" align="center" prop="email" />
      <el-table-column label="" align="center" prop="webUrl" />
      <el-table-column label="" align="center" prop="manager" />
      <el-table-column label="" align="center" prop="isInternal" />
      <el-table-column label="" align="center" prop="groupCode" />
      <el-table-column label="" align="center" prop="customerAccount" />
      <el-table-column label="" align="center" prop="accountBank" />
      <el-table-column label="" align="center" prop="isActived" />
      <el-table-column label="" align="center" prop="remark" />
      <el-table-column label="" align="center" prop="version" />
      <el-table-column label="" align="center" prop="defaultAccountingType" />
      <el-table-column label="" align="center" prop="defaultAllowZeroCost" />
      <el-table-column label="" align="center" prop="upCustomerNo" />
      <el-table-column label="" align="center" prop="paymentTerm" />
      <el-table-column label="" align="center" prop="feeType" />
      <el-table-column label="" align="center" prop="seq" />
      <el-table-column label="" align="center" prop="warehouseCode" />
      <el-table-column label="记录 ID，系统自动产生" align="center" prop="id" />
      <el-table-column label="创建时间" align="center" prop="createDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" prop="updateDate" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button v-hasPermission="['pms:tWhWarehouseCustomer:update']" size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
          <el-button v-hasPermission="['pms:tWhWarehouseCustomer:delete']" size="mini" type="text" icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 添加/修改对话框 -->
    <el-dialog :title="tWhWarehouseCustomerFormDialog.title" :visible.sync="tWhWarehouseCustomerFormDialog.visible" :close-on-click-modal="false" :before-close="resetTWhWarehouseCustomerFormDialog" width="500px" append-to-body>
      <el-form ref="tWhWarehouseCustomerForm" :model="tWhWarehouseCustomerFormData" :rules="tWhWarehouseCustomerFormRules" label-width="80px">
        <el-form-item label="" prop="customerNo">
          <el-input v-model="tWhWarehouseCustomerFormData.customerNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="siteCode">
          <el-input v-model="tWhWarehouseCustomerFormData.siteCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="customerName">
          <el-input v-model="tWhWarehouseCustomerFormData.customerName" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="address">
          <el-input v-model="tWhWarehouseCustomerFormData.address" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="phone">
          <el-input v-model="tWhWarehouseCustomerFormData.phone" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="mobile">
          <el-input v-model="tWhWarehouseCustomerFormData.mobile" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="fax">
          <el-input v-model="tWhWarehouseCustomerFormData.fax" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="email">
          <el-input v-model="tWhWarehouseCustomerFormData.email" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="webUrl">
          <el-input v-model="tWhWarehouseCustomerFormData.webUrl" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="manager">
          <el-input v-model="tWhWarehouseCustomerFormData.manager" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="isInternal">
          <el-input v-model="tWhWarehouseCustomerFormData.isInternal" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="groupCode">
          <el-input v-model="tWhWarehouseCustomerFormData.groupCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="customerAccount">
          <el-input v-model="tWhWarehouseCustomerFormData.customerAccount" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="accountBank">
          <el-input v-model="tWhWarehouseCustomerFormData.accountBank" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="isActived">
          <el-input v-model="tWhWarehouseCustomerFormData.isActived" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="remark">
          <el-input v-model="tWhWarehouseCustomerFormData.remark" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="version">
          <el-input v-model="tWhWarehouseCustomerFormData.version" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="defaultAllowZeroCost">
          <el-input v-model="tWhWarehouseCustomerFormData.defaultAllowZeroCost" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="upCustomerNo">
          <el-input v-model="tWhWarehouseCustomerFormData.upCustomerNo" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="paymentTerm">
          <el-input v-model="tWhWarehouseCustomerFormData.paymentTerm" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="" prop="warehouseCode">
          <el-input v-model="tWhWarehouseCustomerFormData.warehouseCode" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="创建时间" prop="createDate">
          <el-date-picker v-model="tWhWarehouseCustomerFormData.createDate" type="date" value-format="yyyy-MM-dd" size="small" style="width: 100%" placeholder="选择创建时间" clearable />
        </el-form-item>
        <el-form-item label="更新时间" prop="updateDate">
          <el-date-picker v-model="tWhWarehouseCustomerFormData.updateDate" type="date" value-format="yyyy-MM-dd" size="small" style="width: 100%" placeholder="选择更新时间" clearable />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmTWhWarehouseCustomerFormDialog">确 定</el-button>
        <el-button @click="resetTWhWarehouseCustomerFormDialog">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TWhWarehouseCustomerApi from '@/api/pms/TWhWarehouseCustomerApi'

const defaultTWhWarehouseCustomerFormData = {
  customerNo: null,

  siteCode: null,

  customerName: null,

  address: null,

  phone: null,

  mobile: null,

  fax: null,

  email: null,

  webUrl: null,

  manager: null,

  isInternal: null,

  groupCode: null,

  customerAccount: null,

  accountBank: null,

  isActived: null,

  version: null,

  defaultAccountingType: null,

  defaultAllowZeroCost: null,

  upCustomerNo: null,

  paymentTerm: null,

  feeType: null,

  seq: null,

  warehouseCode: null,

  createDate: null,

  updateDate: null

}
export default {
  name: 'TWhWarehouseCustomerList',
  data() {
    return {
      options: {
        sysYnTypeOptions: this.$constant.sysYnTypeOptions
      },
      queryParams: {
        customerNo: null,
        siteCode: null,
        customerName: null,
        address: null,
        phone: null,
        mobile: null,
        fax: null,
        email: null,
        webUrl: null,
        manager: null,
        isInternal: null,
        groupCode: null,
        customerAccount: null,
        accountBank: null,
        isActived: null,
        remark: null,
        version: null,
        defaultAccountingType: null,
        defaultAllowZeroCost: null,
        upCustomerNo: null,
        paymentTerm: null,
        feeType: null,
        warehouseCode: null,
        createDate: null,
        updateDate: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      tWhWarehouseCustomerFormDialog: {
        title: '',
        visible: false
      },
      tWhWarehouseCustomerFormData: Object.assign({}, defaultTWhWarehouseCustomerFormData),
      tWhWarehouseCustomerFormRules: {
        customerNo: [{ required: true, message: '不能为空', trigger: 'blur' }],

        siteCode: [{ required: true, message: '不能为空', trigger: 'blur' }],

        customerName: [{ required: true, message: '不能为空', trigger: 'blur' }],

        isActived: [{ required: true, message: '不能为空', trigger: 'blur' }],

        version: [{ required: true, message: '不能为空', trigger: 'blur' }],

        createDate: [{ required: true, message: '创建时间不能为空', trigger: 'blur' }],

        updateDate: [{ required: true, message: '更新时间不能为空', trigger: 'blur' }]

      },
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
    this.handleQuery()
    this.loadOptions()
  },
  methods: {
    loadOptions() {
    },
    handleAdd() {
      this.openTWhWarehouseCustomerFormDialog()
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TWhWarehouseCustomerApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openTWhWarehouseCustomerFormDialog(id)
    },
    handleQuery() {
      this.loading = true
      TWhWarehouseCustomerApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleExport() {
      this.$confirm('是否确认导出数据?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TWhWarehouseCustomerApi.exportData(this.queryParams)
      }).then(response => {
        this.$common.download(response.msg)
      })
    },
    openTWhWarehouseCustomerFormDialog(id) {
      this.tWhWarehouseCustomerFormDialog.visible = true
      if (id) {
        this.tWhWarehouseCustomerFormDialog.title = '共享仓储客户-修改'
        TWhWarehouseCustomerApi.get(id).then(response => {
          this.tWhWarehouseCustomerFormData = {
            ...this.tWhWarehouseCustomerFormData,
            ...response.data
          }
        })
      } else {
        this.tWhWarehouseCustomerFormDialog.title = '共享仓储客户-添加'
      }
    },
    confirmTWhWarehouseCustomerFormDialog() {
      this.$refs['tWhWarehouseCustomerForm'].validate(valid => {
        if (valid) {
          if (this.tWhWarehouseCustomerFormData.id) {
            TWhWarehouseCustomerApi.edit(this.tWhWarehouseCustomerFormData).then(response => {
              this.$message.success('修改成功')
              this.resetTWhWarehouseCustomerFormDialog()
              this.handleQuery()
            })
          } else {
            TWhWarehouseCustomerApi.add(this.tWhWarehouseCustomerFormData).then(response => {
              this.$message.success('添加成功')
              this.resetTWhWarehouseCustomerFormDialog()
              this.handleQuery()
            })
          }
        }
      })
    },
    resetTWhWarehouseCustomerFormDialog() {
      this.tWhWarehouseCustomerFormDialog = {
        title: '',
        visible: false
      }
      this.tWhWarehouseCustomerFormData = Object.assign({}, defaultTWhWarehouseCustomerFormData)
      this.resetForm('tWhWarehouseCustomerForm')
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
